<template>
  <div class="rongqi">
    <div class="dongzuo_part" v-for="Info in info">
      <router-link to="/actiondetail">
        <div class="dongzuo_show" @click="get_actionid(Info.id)">
          <img :src="Info.picture" />
        </div>
      </router-link>
        <p><strong>{{Info.name}}</strong></p>
      <p class="info"><span>{{Info.grade_level}}</span>
        <span>{{Info.qixie}}</span>
        <span>{{Info.part_name}}</span></p>
    </div>
  </div>
</template>

<script>
    export default {
        name: "VideoShow",
        data(){
          return{
            info:{"img_url":require('../../img/四足俯卧撑.png'),"name":"四足俯卧撑","grade":"低级","apparatus":"杠铃","bodypart":"前臂"},
          }
      },computed: {
        action() {
          return this.$store.state.action
        }
      },
      watch: {
        action: function () {
          this.info=this.$store.state.action
        }
      },methods:{
        get_actionid:function (id) {
          console.log(id);
          this.$store.state.click_index_actionid=id
        }
      }
    }
</script>

<style scoped>
  .rongqi{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;

  }
  .dongzuo_part{
    background: white;
    width: 23%;
    margin-bottom: 30px;
    margin-right: 1%;
    padding: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 0.5s;
  }
  .dongzuo_show{
    width: 100%;
    height: 78%;
  }
  .dongzuo_part .dongzuo_show img{
    width: 100%;
    height: 100%;
  }

   .dongzuo_part p {
    padding-top: -5px;
  }
   .dongzuo_part:hover{
    box-shadow: 0px 0px 10px gray;
  }
  a{
    text-decoration: none;
    color: black;
    font-family: helvetica;
  }
  span{
    font-family:Arial,Helvetica,sans-serif;
  }
  .info{
    font-size: 14px;
  }
</style>
